<template>
    <view>
        <u-popup :show="falg" round="20" mode="bottom" @close="close1" @open="open1">
            <view class="mall-inter" :style="{paddingBottom: focus ? '100rpx': '30rpx'}">
                <view class="mall-inter-top">
                    <view>积分</view>
                    <view @click="close1"><image src="https://smosun-minapp.oss-cn-shanghai.aliyuncs.com/weapp/img/mall/inter-close.png" mode=""></image></view>
                </view>
                <view class="mall-inter1"
                    ><image src="https://smosun-minapp.oss-cn-shanghai.aliyuncs.com/weapp/img/mall/mall.png" mode=""></image>账户积分：{{ userScore }}</view
                >
                <view class="mall-input">
                    <input
                        v-model="useScore"
                        type="number"
                        :placeholder="'输入使用积分数量，最多可使用' + maxScore + '积分'"
                        @input="change"
                        @focus="focus = true"
                        @blur="focus = false"
                        placeholderStyle="font-size:28rpx;color:#ccc"
                        fontSize="28rpx"
                        color="#333"
                    />
                </view>
                <view class="mall-radio">
                    <view @click="type = 0" class="mall-radio-name"
                        ><view :class="type == 0 ? 'radioact' : 'radio'"></view> 可抵扣
                        <text v-if="pointsExchangeRatio != 0"
                            >¥{{ (useScore / pointsExchangeRatio).toFixed(2) }}</text
                        ></view
                    >
                    <view @click="type = 1" class="mall-radio-name"
                        ><view :class="type == 1 ? 'radioact' : 'radio'"></view>本单不使用积分</view
                    >
                </view>
                <!-- #ifdef MP-WEIXIN -->
                <view style="height: 80rpx"></view>
                <!-- #endif -->
                <!-- #ifndef MP-WEIXIN -->
                <view style="height: 100rpx"></view>
                <!-- #endif -->
                <view @click="commit" class="footer">
                    <view class="footer-item">确定</view>
                </view>
            </view>
        </u-popup>
    </view>
</template>

<script>
export default {
    name: 'mall-intergral',
    props: {
        falg: {
            type: Boolean,
            default: false,
        },
        userScore: {
            type: String,
            default: '0',
        },
        pointsExchangeRatio: {
            type: String,
            default: '1',
        },
        maxScore: {
            type: Number,
            default: 0,
        },
        minScore: {
            type: Number,
            default: 0,
        },
    },
    watch: {
        falg(value) {
            if (this.useScore) {
                this.type = 0;
            } else {
                this.type = 1;
            }
        },
    },
    data() {
        return {
            useScore: '',
            type: 1,
            focus: false
        };
    },
    methods: {
        close1() {
            this.$emit('close1');
        },
        open1() {
            this.$emit('open1');
        },
        commit() {
            if (this.type == 1) {
                this.useScore = 0;
                this.$emit('useScoreEvent', 0);
            } else {
                this.$emit('useScoreEvent', this.useScore);
            }
        },
        change(e) {
            let that = this;
            var score = e.detail.value;
            if (score != '') {
                if (score > this.maxScore) {
                    score = this.maxScore;
                }
                if (score < this.minScore) {
                    score = this.minScore;
                }
                that.$nextTick(function () {
                    that.useScore = Number(score);
                });
            }
        },
    },
};
</script>

<style scoped lang="scss">
.mall-inter {
    background-color: #fff;
    padding: 30rpx;
    box-sizing: border-box;
    border-radius: 20rpx;
}
.mall-inter-top {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.mall-inter-top view:first-child {
    color: #333;
    line-height: 44rpx;
    font-size: 32rpx;
    font-weight: 500;
}
.mall-inter-top image {
    width: 24rpx;
    height: 24rpx;
}
.mall-inter1 {
    font-size: 28rpx;
    line-height: 40rpx;
    margin: 30rpx 0 60rpx;
    color: #009977;
    font-weight: 500;
    display: flex;
    align-items: center;
}
.mall-inter1 image {
    width: 32rpx;
    height: 32rpx;
    margin-right: 4rpx;
}
.mall-input {
    padding-bottom: 20rpx;
    font-size: 28rpx;
    color: #282828;
    width: 100%;
    border-bottom: 1px solid #e6e6e6;
}
.mall-input input {
    color: #282828;
    font-size: 28rpx;
    line-height: 40rpx;
}
.mall-radio {
    padding: 20rpx 0;
}
.mall-radio-name {
    margin-left: 8rpx;
    font-size: 28rpx;
    line-height: 40rpx;
    font-weight: 400;
    padding: 20rpx 0;
    display: flex;
    align-items: center;
}
.mall-radio-name text {
    color: #ff822e;
    margin-left: 10rpx;
    display: inline-block;
}
.mall-radio-name .radio {
    width: 32rpx;
    height: 32rpx;
    border: 1px solid #979797;
    border-radius: 50%;
    margin-right: 10rpx;
    box-sizing: border-box;
}
.mall-radio-name .radioact {
    border-radius: 50%;
    width: 32rpx;
    height: 32rpx;
    background: url(../../static/img/homemenu/radioActive.png) no-repeat;
    background-size: 32rpx 32rpx;
    margin-right: 10rpx;
}
</style>
